<template>
	<view class="content">
		<!-- 菜单栏 -->
		<uni-nav-bar title="缴费记录" left-icon="left" left-text="返回" backgroundColor="#090" color="#fff" class="nav-bar"
			@clickLeft="back"></uni-nav-bar>
		<!-- 下拉菜单 -->
		<view>
			<picker mode="selector" :range="feeTypes" class="picker" @change="doFeeTypeChange">
				<view class="picker-content">
					<text class="txt">{{curFeeType<0?'缴费类型':feeTypes[curFeeType]}}</text>
					<uni-icons type="down"></uni-icons>
				</view>
			</picker>
			<picker mode="date" class="picker" fields="month" @change="doMonthChange">
				<view class="picker-content">
					<text class="txt">{{curMonth}}</text>
					<uni-icons type="down"></uni-icons>
				</view>
			</picker>
		</view>
		<!-- 缴费记录 -->
		<uni-card :title="item.type|feeType" :thumbnail="item.type|feeTypeIcon"
			:extra="Math.abs(item.amount).toFixed(2)" class="record" v-for="item in records" :key="item.fid">
			<uni-list class="record-content">
				<uni-list-item title="缴费状态" rightText="缴费成功"></uni-list-item>
				<uni-list-item title="缴费用户" :rightText="item.householdId"></uni-list-item>
				<uni-list-item title="缴费时间" :rightText="item.paidTime|formatDate"></uni-list-item>
			</uni-list>
		</uni-card>
	</view>
</template>

<script>
	import {
		feeRecord
	} from '../../service'

	export default {
		data() {
			return {
				records: [], //保存请求的数据
				//当前选中的月份
				curMonth: '选择月份',
				// 当前选中的缴费类型编号
				curFeeType: -1,
				//所有缴费类型
				feeTypes: [
					'全部类型', '水费', '电费', '燃气费', '物业费', '停车费', '宽带费'
				],


			}
		},
		onLoad() {
			this.requestFeeRecord()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			//处理缴费类型的切换
			doFeeTypeChange(e) {
				// e是事件对象
				// 获取选中的数组下标
				this.curFeeType = e.detail.value
				this.requestFeeRecord()
			},
			doMonthChange(e) {
				// e是事件对象
				// 获取选中的数组下标
				this.curMonth = e.detail.value;
				this.requestFeeRecord()
			},
			//将三次请求封装——————缴费记录
			async requestFeeRecord() {
				let type = this.curFeeType //缴费类型
				let startTime = 0 // 开始时间
				let endTime = 0 // 结束时间
				//判断用户是否选择月份
				if (this.curMonth.length > 4) {
					let arr = this.curMonth.split('-') //将选择的月份转成数组
					startTime = new Date(this.curMonth) - 0 //开始的时间戳
					endTime = new Date(arr[0], arr[1]) - 1 //结束时间戳
				}
				//发送请求
				const data = await feeRecord(type, startTime, endTime)
				console.log(data);
				this.records = data


			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		display: block;

		::v-deep .uni-navbar__content {
			display: block;
		}
	}

	// 下拉菜单
	.picker {
		.picker-content {
			font-size: $uni-font-size-base;
			width: $uni-font-size-base*7.5;
			justify-content: space-between;
			background-color: $uni-bg-color;
			border: $uni-border;
			padding: $uni-spacing-col-sm $uni-spacing-row-base $uni-spacing-col-sm $uni-spacing-row-lg;
			border-radius: $uni-border-radius-lg*3;
			align-items: center;
			margin-top: $uni-spacing-col-lg*2;
			margin-left: $uni-spacing-row-lg;

			.txt {
				margin-right: $uni-spacing-row-sm;

			}
		}
	}

	//缴费记录
	.record {
		flex-direction: column;

		.record-content {
			width: 100%;
		}
	}
</style>